import React from 'react';
import PropTypes from 'prop-types';

import { withRouter } from 'react-router-dom';
import { observer, inject } from 'mobx-react';
import User from '../../../stores/user_store'
import './index.scss';
import commFuc from '../../../util/comm';

@inject((stores) => {
  const store = {
    user: stores.user,
  }
  return store
})
@observer
class UserLogin extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      errorMessage: '',
      activeIndex: 0,
    }
    this.check = this.check.bind(this)
    this.inputChange = this.inputChange.bind(this)
    this.handleKeyup = this.handleKeyup.bind(this)
    this.submit = this.submit.bind(this)
    // 防止快速连续点击登录的执行
    this.timeId = 0;
  }
  componentDidMount() {
  }
  componentWillUnmount() {
    clearInterval(this.timeId);
  }
  // 正在登录状态
  setLoadingSatus(timeOut) {
    let index = 0;
    this.timeId = setInterval(() => {
      this.setState({
        activeIndex: ++index % 3,
      })
    }, timeOut)
  }
  // 检查用户名和密码是否合法
  check() {
    const { validate } = commFuc;
    const error = 'error'
    const right = 'right'
    const temp = {
      usernameClass: validate(this.state.username, 'require') ? right : error,
      passwordClass: validate(this.state.password, 'require') ? right : error,
    }
    this.setState(temp)
    for (const item in temp) { //eslint-disable-line
      if (temp[item] === error) {
        return false
      }
    }
    return true
  }
  // 提交登录
  submit() {
    if (this.check()) {
      this.setLoadingSatus(300);
      const params = {
        username: this.state.username,
        password: this.state.password,
      }
      this.props.user.login(params).then(() => {
        this.handleLoginSuccess()
      }).catch(() => {
      })
    }
  }
  // 数据绑定
  inputChange(e) {
    const input = e.target;
    const temp = {};
    temp[input.name] = input.value;
    this.setState(temp, this.check);
  }
  // 按回车键登录
  handleKeyup(e) {
    const code = e.keyCode || e.which;
    if (code === 13) {
      this.submit();
    }
  }
  // 登录成功
  handleLoginSuccess() {
    if (this.props.redirect) {
      this.props.history.push(decodeURIComponent(this.props.redirect))
    } else {
      this.props.history.push('/');
    }
  }
  render() {
    const error = this.props.user.errors
    return (
      <div className="user-login">
        <div className="clear" style={{ height: 0, overflow: 'hidden', position: 'absolute' }}>
          <input type="text" name="userNameClear" />
          <input name="passwordClear" type="password" />
        </div>
        <div className="form-item error-message" dangerouslySetInnerHTML={{ __html: error }} />
        <div className="form-item">
          <label htmlFor="username">用户名:</label>
          <span className="require-tip">
            *
          </span>
          <input
            type="text"
            name="username"
            className={this.state.usernameClass}
            placeholder="请输入用户名"
            onBlur={this.check}
            onChange={this.inputChange}
            onKeyUp={this.handleKeyup}
          />
        </div>
        <div className="form-item">
          <label htmlFor="password">密码:</label>
          <span className="require-tip">
            *
          </span>
          <input
            name="password"
            className={this.state.passwordClass}
            type="password"
            placeholder="请输入密码"
            onBlur={this.check}
            onChange={this.inputChange}
            onKeyUp={this.handleKeyup}
          />
        </div>
        <div className="form-item" >
          <div className="logining" style={this.props.user.isLoging ? { visibility: 'visible' } : {}}>
            <span className={this.state.activeIndex === 0 ? 'point active' : 'point'} />
            <span className={this.state.activeIndex === 1 ? 'point active' : 'point'} />
            <span className={this.state.activeIndex === 2 ? 'point active' : 'point'} />
          </div>
        </div>
        <div className="form-item">
          {<button className="login-btn" onClick={this.submit}>登录</button>}
          <a href="/" className="forget-password">忘记密码</a>
        </div>
      </div>
    )
  }
}
export default withRouter(UserLogin);
UserLogin.propTypes = {
  redirect: PropTypes.string,
  user: PropTypes.instanceOf(User),
  history: PropTypes.objectOf(Object),
}
